<mat-card class="card">
  <mat-toolbar-row>
    <h3>{{ 'Network Configuration' | translate }}</h3>
    <button
      mat-button
      color="default"
      ixTest="network-settings"
      [ixUiSearch]="networkConfigurationCardElements.elements.settings"
      (click)="onSettingsClicked()"
    >
      {{ 'Settings' | translate }}
    </button>
  </mat-toolbar-row>

  <mat-card-content [ixUiSearch]="networkConfigurationCardElements.elements.configuration">
    <div class="columns">
      @if (!isLoading) {
        <div>
          <mat-list class="list">
            <div class="section-title">{{ 'DNS Servers' | translate }}</div>
            @for (nameserver of nameservers; track nameserver.label) {
              <mat-list-item
                [ixUiSearch]="networkConfigurationCardElements.elements.nameServers"
              >
                <span class="label">{{ nameserver.label | translate }}:</span>
                <span class="value">
                  {{ nameserver.value | cast | translate }}
                </span>
              </mat-list-item>
            }
          </mat-list>

          @if (ipv4.length > 0) {
            <mat-list class="list">
              <div class="section-title">{{ 'Default Route' | translate }}</div>
              <mat-list-item>
                <ix-icon name="router" class="list-icon"></ix-icon>
                <span class="label">{{ 'IPv4' | translate }}:</span>
                <ul class="value">
                  @for (ip of ipv4; track ip) {
                    <li>{{ ip }}</li>
                  }
                </ul>
              </mat-list-item>
            </mat-list>
          }

          @if (ipv6.length > 0) {
            <mat-list class="list">
              <mat-list-item>
                <ix-icon name="router" class="list-icon"></ix-icon>
                <span class="label">{{ 'IPv6' | translate }}:</span>
                <ul class="value">
                  @for (ip of ipv6; track ip) {
                    <li>{{ ip }}</li>
                  }
                </ul>
              </mat-list-item>
            </mat-list>
          }
        </div>

        @if (config.hostname) {
          <mat-list class="details-list">
            <mat-list-item>
              <span class="label">{{ 'Hostname:' | translate }}</span>
              <span class="value">{{ config.hostname_local }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'Domain:' | translate }}</span>
              <span class="value">{{ config.domain || ('Inherit from DHCP' | translate) }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'HTTP Proxy:' | translate }}</span>
              <span class="value">{{ config.httpproxy || '-' }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'Service Announcement:' | translate }}</span>
              <span class="value">{{ serviceAnnouncement }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'Additional Domains:' | translate }}</span>
              <span class="value">{{ additionalDomains }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'Hostname Database:' | translate }}</span>
              <span class="value">{{ config.hosts.join(', ') || '-' }}</span>
            </mat-list-item>
            <mat-list-item>
              <span class="label">{{ 'Outbound Network:' | translate }}</span>
              <span class="value">{{ outboundNetwork }}</span>
            </mat-list-item>
          </mat-list>
        }
      }
    </div>
  </mat-card-content>
</mat-card>
